<template>
  <a href='http://get.adobe.com/cn/flashplayer/'>
    <video-player class="vjs-custom-skin" :options="playerOptions">
    </video-player>
    <!-- <video id="my-player" class="video-js" controls>
        <source src="http://v.bestqd.cn/29d05f588cd648ce809736ee8300868e/962774d87310444e854dcd58cb97b945-e88ef02ad30c9d8098784afca1efaf2e-ld.m3u8?auth_key=1526398212-61cc94a5602b487399edbb3efb449cb9-0-32be780ddb0f1739bde69794967c385b" type="application/x-mpegURL">
        <p class="vjs-no-js">
          not support
        </p>
    </video> -->
  </a>
</template>

<script>
  // import $script from 'scriptjs';
  import 'videojs-flash'
  import Vue from 'vue'
  import 'video.js/dist/video-js.css'
  import { videoPlayer } from 'vue-video-player'
  // import videojs from 'video.js'
  // videojs.options.flash.swf = "player/video-js.swf"
  // console.log(videojs)

  export default {
    data() {
      return {
        playerOptions: {
          height: '360',
          sources: [{
            type: "rtmp/flv",
            src: "rtmp://www.bestqd.cn/live/"
          }],
          techOrder: ['flash'],
          autoplay: true,
          controls: true,
          poster: "https://udemy-images.udemy.com/course/480x270/749690_97fd_7.jpg"
        }
      }
    },
    components: {
      videoPlayer
    },
    mounted() {
      // $script("https://cdn.bootcss.com/video.js/7.0.0-rc.1/video.js", () => {
      //     videojs('my-player')
      // })
    }
  }
</script>

<style lang="less">
  #vjs_video_3 {
    padding-bottom: 56.25%;
    height: 0;
    .vjs-big-play-button {
      left: calc(50% - 1.5em);
      top: calc(50% - 0.75em);
    }
  }
  .video-js {
    width: 100%;
  }
</style>